<template>
  <el-dialog 
    v-model="state.show"
    width="500px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
    title="设备信息"
  >
    <el-button type="primary" @click="refresh" style="margin-bottom: 10px;">刷新</el-button>
    <el-descriptions :column="1" class="first-desc">
      <el-descriptions-item label="设备光照度值:">{{ state.lightValue }} lux</el-descriptions-item>
      <el-descriptions-item label="最近上报时间:">{{ parseTime(state.time, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { getDevicesDetail } from '../api/devices.api'

const state = reactive({
  show: false,
  row: {} as any,
  lightValue: 0,
  time: 0
})

const openDialog = (currentDevice) => {
  state.show = true
  state.row = currentDevice

  refresh()
}

const refresh = () => {
  getDevicesDetail(state.row.deviceId)
  .then((res) => {
    state.lightValue = res.data.property?.['light-r']?.value
    state.time = res.data.property?.['light-r']?.occurred
  })
}

defineExpose({
  openDialog,
})
</script>

<style lang="scss" scoped>
.first-desc :deep(.el-descriptions__body) {
  padding: 10px 10px 0 10px;
  background-color: #EFEFEF;
}
</style>